<template>
  <uni-nav-bar title="加注订单" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package_sale animation-slide-right">
    <view class="space-between">
      <view>订单号</view>
      <view class="center">
        <image src="../../../static/saleIcon/icon/copy.svg" mode="" style="width:40rpx;height: 40rpx;margin-right: 10rpx;"
          @click="copyText(orderAll.order_sn)"></image>
        {{orderAll.order_sn}}
      </view>
    </view>
    <view class="space-between top">
      <view>下单时间</view>
      <view>{{orderAll.createtime}}</view>
    </view>
    <view class="space-between top">
      <view>加注量</view>
      <view>{{orderAll.amount}} 公斤</view>
    </view>
    <view class="space-between top">
      <view>金额</view>
      <view>{{orderAll.money}} 元</view>
    </view>
    <view class="space-between top">
      <view>消费者</view>
      <view>{{orderAll.driver_name}}</view>
    </view>
    <view class="space-between top">
      <view>加注机</view>
      <view>{{orderAll.fill_name}}</view>
    </view>
    <view class="space-between top">
      <view>支付方式</view>
      <view>{{orderAll.pay_type_text}}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { navBack } from '@/utils/navigator';
  import { copyText } from '@/utils/copyText';
  import { ref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { getOrderFillingInfo } from '@/gql/earthPushing/order';
  import { toPublish } from '@mqtt';
  import { showLoading } from '@/utils/prompt';
  const orderID = ref('')
  const orderAll = ref({})
  onLoad((pearm) => {
    orderID.value = pearm.id
    init()
  })
  function init() {
    showLoading()
    const payload = {
      query: getOrderFillingInfo,
      variables: {
        id: Number(orderID.value)
      },
    };
    toPublish(
      'ql/staff/getOrderFillingInfo',
      payload,
      (obj : any) => {
        const { getOrderFillingInfo } = obj.data;
        orderAll.value = getOrderFillingInfo
      },
    );
  }
</script>

<style scoped lang="less">
  .top {
    margin-top: 15rpx;
  }
</style>